<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        .mapcontain {
            width: 100%;
            height: 100%;
        }
        #allmap {
            height: 100%;
            width: 100%;
        }
        #result{
            position: fixed;
            top: 10px;
            left: 20px;
            width: 300px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            border-radius: 7px;
            z-index: 99;
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=jYaBAHQejLwjG5LCM88MZQgv7N4oBGPZ"></script>
    <title>根据起点和终点经纬度驾车导航</title>
</head>
<body style="margin: none">
    <div class="mapcontain"><div id="allmap" ></div></div>
    <div id="result">根据起点和终点经纬度驾车导航</div>
</body>
</html>
<script type="text/javascript">
    var map = new BMapGL.Map('allmap');
    var point = new BMapGL.Point(116.51397, 39.73517);
    map.centerAndZoom(point, 11);
    map.enableScrollWheelZoom(true);

    var driving = new BMapGL.DrivingRouteLine(map, { 
        renderOptions: { 
            map: map, 
            autoViewport: true,
            enableDragging: true,
        }
    })
    var driving2 = new BMapGL.DrivingRoute(map, { 
        renderOptions: { 
            map: map, 
            autoViewport: true,
        }
    })

    var start = new BMapGL.Point(116.236532, 39.904113661);
    var start2 = new BMapGL.Point(116.310791, 40.003419);
    var end = new BMapGL.Point(116.545486, 40.006040);
    var end2 = new BMapGL.Point(116.486419, 39.877282);
    var way2 = new BMapGL.Point(116.36315661025989,39.904113661);
    var way1 = new BMapGL.Point(116.49257333444989,39.87920464090217);
    var way = '39.87920464090217,116.49257333444989|39.87806279099342,116.49218746174857'
    
    driving.search(start, end, {
            waypoints: [way2]
        });
    driving2.search(start2, end2, {
            
        });
</script>